<template lang="pug">
div.menu-boom.padding-box-100
  div.box
    - let n = 12
      while n > 0
        - n--
        div.box-c
  div.box-g
</template>

<script lang="ts" setup>

</script>

<style scoped lang="scss">
.menu-boom {
  $w: 48px;

  .box {
    position: relative;
    margin: 200px;
    width: $w;
    height: $w;

    &-c {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #2f6f44;
      border-radius: calc($w / 2);

      transition: transform .5s;
      transition-timing-function: cubic-bezier(.57, 0, .53, 1.7);
    }

    $i: 12;
    @while $i > 0 {
      .box-c:nth-child(#{$i}) {
        transform: rotate($i * 30deg) translate(0, 0);
        filter: hue-rotate($i * 30deg);
      }
      $i: $i - 1;
    }
  }

  .box:hover {

    $i: 12;
    @while $i > 0 {
      .box-c:nth-child(#{$i}) {
        transform: rotate($i * 30deg) translate(0, 120px);
      }
      $i: $i - 1;
    }
  }

  .box-g {
    margin: 200px;
    width: $w;
    height: $w;
    border-radius: calc($w / 2);

    animation-name: g;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(.66, 0, .49, 3);

    background-color: #2f6f44;
  }
}

@keyframes g {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(200px);
  }
}
</style>
